<template>
	<div>
		<div class="publish-top">
			<div class="left-icon" @click="tabReturn">
				<img src="../../../assets/images/left.png"/>
			</div>
			<p>精品帖子</p>
		</div>
		<div class="boutique" v-if="isBout">
			<home-list @maskEfocus="maskEfocus" :moreBoutData="moreBoutData"></home-list>
		</div>
		<div class="list-img-pic" v-else>
			<nocontent></nocontent>
		</div>
		<!--遮罩弹框-->
		<div class="mask" v-if="isShow">
			<div class="mask-opaciy"></div>
			<div class="mask-information">
				<img :src="isfocusData.user_himg" class="head-portrait"/>
				<img src="../../../assets/images/home/del.png" class="Close" @click="onClose"/>
				<h3>{{isfocusData.user_nickname}}</h3>
				<p>{{isfocusData.user_desc}}</p>
				<div class="info-follow">
					<div @click="onFollow">
						<img src="../../../assets/images/home/follow.png"/>
						<span>{{value}}</span>
					</div>
					<img src="../../../assets/images/hx.png"/>
					<div @click="onEmail">
						<img src="../../../assets/images/home/letter.png"/>
						<span>发私信</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import HomeList from '@/components/home/home-list';
	import Nocontent from '@/components/home/no-content';
	import qs from 'qs';
	import axios from "axios";
	import user from '@/utils/isLogin';;
	
	export default{
		data(){
			return{
				moreBoutData:{},
				isShow:false,
				isfocusData:{},
				value:'',
				userInfoId:'',
				userName:'',
				isBout:true
			}
		},
		filters: {
		  url: function (value) {
		    if (!value) return ''
		    value = user.src + value
		    return value
		  }
		},
		created(){
			
			//更多精品贴
			axios.post( user.src + '/index/article/more_goods_article' , {
					
			})
			.then((res) => {
				if(res.data.status == 1012){
					this.isBout = false;
				}
				if(res.data.status == 200){
					this.moreBoutData = res.data.data;
					this.isBout = true;
				}
			})
			.catch((error)=> {
			    console.log(error);
			});
			let plusReady = ()=>{
				
			};
			if(window.plus){
				plusReady();
			}else{
				document.addEventListener("plusready", plusReady, false);
			}
		},
		components:{
			HomeList,
			Nocontent
		},
		methods:{		
			//关闭当前窗口
			tabReturn(){
				var currentPage = plus.webview.currentWebview();
				plus.webview.close(currentPage);
			},
			maskEfocus(arr){
				this.isfocusData = arr[0];
				this.isShow = arr[1];
				this.userInfoId = arr[2];
				this.userName = arr[3];
				this.value = arr[4];
			},
			//关闭窗口
			onClose(){
				this.isShow = false;
			},
			//关注
			onFollow(){
				var userId = JSON.parse(window.localStorage.getItem( 'userInfo' )).userId;
				var data = qs.stringify({
			   	article_userId:this.userInfoId,
			   	userid:userId
				})
				axios({
				   method: 'post',
				   url: user.src + '/index/collect/focus',
				   data:data
				})
				.then((res) => {
					if(res.data.status == 200){
						this.value = '已关注';
						plus.nativeUI.toast("关注成功");
					}else if(res.data.status == 1030){
						this.value = '关注';
						plus.nativeUI.toast("取消关注");
					}
				})
				.catch((error)=> {
				    console.log(error);
				});
			},
			//私信
			onEmail(){
				var send = plus.webview.create('send.html','send',{},{
					recipientId:this.userInfoId,
					name:this.userName
				});
				send.addEventListener("loaded", function () {
				    send.show('slide-in-right', 300);
				    send = null;
				}, false);
				this.isShow = false;
			}
		}
	}
</script>

<style lang="less">
	body{
		padding: 0;
		margin: 0;
		width: 100%;
		height: 100%;
	}
	*{
		margin: 0;
		padding: 0;
	}
	ul,li{
		list-style: none;
	}
	.publish-top{
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 60px;
		background:@default-blue;
		box-shadow: 0px 0px 8px 1px #999;
		padding-top: 70px;
		display:flex;		
		.left-icon{
			width: 90px;
			
			img{
				width: 15px;
				height: 26px;
				margin-left: 31px;
			}
		}
		p{	
			width: 75%;	
			color: #fff;
			font-size: 28px;
			text-align: center;
		}
	}
	.boutique{
		padding: 130px 26px 0;
		overflow: hidden;
	}
	.mask{
		width: 100%;
		height: 100%;
		position: fixed;
		left: 0;
		top: 0;
		.mask-opaciy{
			width: 100%;
			height: 100%;
			background: #000000;
			opacity: .5;
		}
		.mask-information{
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			width: 598px;
			height: 467px;
			border: 0.1rem solid #d4ccca;
			background: #FFFFFF;
			border-radius: 10px;
			.head-portrait{
				position: absolute;
				left: 212px;
				top: -70px;
				width: 160px;
				height: 160px;
				border: 0.2rem solid #FFFFFF;
				border-radius: 50%;
			}
			.Close{
				position: absolute;
				right: 0;
				top: -80px;
				width:76px;
				height: 76px;
			}
			h3{
				margin-top: 123px;
				text-align: center;
				font-size: 38px;
			}
			p{
				height: 147px;
				margin-top: 10px;
				padding: 0 80px;
				font-size: 26px;
				overflow: hidden;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 3;
				overflow: hidden;
			}
			.info-follow{
				height: 128px;
				border-top: 0.1rem solid #cecece;
				display: flex;
				align-items: center;	
				justify-content: space-between;			
				padding-left: 90px;
				padding-right: 75px;
				div{
					display: flex;
					align-items: center;
					img{
						width: 48px;
						height: 46px;
						margin-right: 10px;
					}
					span{
						font-size: 28px;
					}
				}
				img{
					width: 1px;
					height: 43px;
				}
				
			}
		}
	}
	.list-img-pic{
		height: 800px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>